<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Canvas考试</title>
</head>
<style>
    .wrapper{
        width: 1000px;
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
    }
    .item {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
</style>
<body>

    <div class="wrapper">
        <div class="item">
            <div>第一题</div>
            <canvas id="canvas-1" width="300" height="300" style="border: 1px solid #ccc;margin-top: 10px;"></canvas>
        </div>
        <div class="item">
            <div>第二题</div>
            <canvas id="canvas-2" width="300" height="300" style="border: 1px solid #ccc;margin-top: 10px;"></canvas>
        </div>
        <div class="item">
            <div>第三题</div>
            <canvas id="canvas-3" width="300" height="300" style="border: 1px solid #ccc;margin-top: 10px;"></canvas>
        </div>
        <div class="item">
            <div>第四题</div>
            <canvas id="canvas-4" width="300" height="300" style="border: 1px solid #ccc;margin-top: 10px;"></canvas>
            <input type="button" value="变大" id="bd"/> 
        </div>
        <div class="item">
            <div>第五题</div>
            <canvas id="canvas-5" width="300" height="300" style="border: 1px solid #ccc;margin-top: 10px;"></canvas>
            <div>
                <input type="button" value="红" id="red">
                <input type="button" value="黄" id="yellow">
                <input type="button" value="蓝" id="blue">
                <input type="button" value="下载" id="download">
            </div>
        </div>
        <div class="item">
            <div>第六题</div>
            <canvas id="canvas-6" width="300" height="300" style="border: 1px solid #ccc;margin-top: 10px;"></canvas>
             <input type="button" value="button" id="button">
        </div>
    </div>
    
</body>
<script>
    window.onload = function() {
			let oneCanvas=document.getElementById('canvas-1');
			let onepen=oneCanvas.getContext('2d');
			
			function drawRoundRect(cxt, x, y, width, height, radius){   
		        cxt.beginPath();   
		        cxt.arc(x + radius, y + radius, radius, Math.PI, Math.PI * 3 / 2);   
		        cxt.lineTo(width - radius + x, y);   
		        cxt.arc(width - radius + x, radius + y, radius, Math.PI * 3 / 2, Math.PI * 2);   
		        cxt.lineTo(width + x, height + y - radius);   
		        cxt.arc(width - radius + x, height - radius + y, radius, 0, Math.PI * 1 / 2);   
		        cxt.lineTo(radius + x, height +y);   
		        cxt.arc(radius + x, height - radius + y, radius, Math.PI * 1 / 2, Math.PI);   
		        cxt.closePath();   
		    }   
		    drawRoundRect(onepen, 200, 10, 40, 40, 5);
		    onepen.fill();
			
			onepen.beginPath();
			onepen.arc(50,50,30,0,Math.PI/180*360,false);
			onepen.fill();
			
			onepen.fillRect(100,100,30,30);
			
			
			
			let twoCanvas=document.getElementById('canvas-2');
			let twopen=twoCanvas.getContext('2d'); 
			
			twopen.arc(50,50,30,0,Math.PI/180*360,false);
			twopen.stroke();
			
			twopen.strokeRect(100,100,30,30);
			
			twopen.moveTo(200,200);
			twopen.lineTo(200,300);
			twopen.lineTo(300,200);
			twopen.lineTo(200,200);
			twopen.stroke();
			
			
			let threeCanvas=document.getElementById('canvas-3');
			let threepen=threeCanvas.getContext('2d');
			
			let x=50,y=50,height=150,width=150;
			setInterval(function(){
				threepen.translate(x + width / 2, y + height / 2);
				threepen.rotate(Math.PI / 180 * 30);
				threepen.translate(-(x + width / 2), -(y + height / 2));
				threepen.clearRect(0,0,300,300);
				threepen.fillRect(x,y,width,height);
			},2000)
			
			
			let fourCanvas=document.getElementById('canvas-4');
			let fourpen=fourCanvas.getContext('2d');
			let bd=document.getElementById('bd');
			fourpen.fillRect(100,100,100,100);
			
			bd.onclick=function(){
				// centerX=50
				let x=100;
				let y=100;
			     
			     
			     
				fourpen.clearRect(0,0,300,300);
				fourpen.scale(1.5,1.5);
				fourpen.fillStyle='black';
				fourpen.fillRect(x-x/2,y-y/2,100,100);
				
				
			}
				

			let fiveCanvas=document.getElementById('canvas-5');
			let fivepen=fiveCanvas.getContext('2d');
			
			var red=document.getElementById('red');
			var yellow=document.getElementById('yellow');
			var blue=document.getElementById('blue');
			 var download=document.getElementById('download');
			 
			 red.onclick=function(){
			 	fivepen.strokeStyle='red';
			 }
			 yellow.onclick=function(){
			 	fivepen.strokeStyle='yellow';
			 }
			 blue.onclick=function(){
			 	fivepen.strokeStyle='blue';
			 }
			 
			var  d,f;
			var flag=false;
			document.onmousedown=function(e){
				flag=true;
				d=e.pageX-fiveCanvas.offsetLeft;
				f=e.pageY-fiveCanvas.offsetTop;
				fivepen.moveTo(d,f);					
   				document.onmousemove=function(e){
   					if(flag==true){
   						d=e.pageX-fiveCanvas.offsetLeft;
						f=e.pageY-fiveCanvas.offsetTop;
						fivepen.lineTo(d,f);
						fivepen.stroke();
						
   					}
   				}
   				
   				
   				document.onmouseup=function(e){
						flag=false;
					}
			}
			
			let sixCanvas=document.getElementById('canvas-6');
			let sixpen=sixCanvas.getContext('2d');
			
			var image=new Image();
			image.src='img1.jpg';
			
			image.onload=function(){
				sixpen.drawImage(image,0,0,300,300);
				
				var  ImageData=sixpen.getImageData(0,0,300,300);
				var data=ImageData.data;
				var pp=0;
				document.getElementById('button').onclick=function(){
					let light=300;
					for(var i=0;i<data.length;i+=4){
						data[i+0]+=light;
						data[i+1]+=light;
						data[i+2]+=light;
					}
					sixpen.putImageData(ImageData,0,0);
					pp++;
					console.log(pp);
					if(pp==2){
						alert('已经变色');
					}
				}
				
			}
			
			
			
			
    }
</script>
</html>